<template>
  <el-dialog
    class="add-itive-comp"
    title="添加材料"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    append-to-body
    :width="$setRem(950)"
    :before-close="handleCancel">
    <div class="table-container">
      <div class="search-container">
        <div class="content">
          <el-input
            v-model="condition"
            placeholder="请输入材料名称"
            @blur="handleSearch"
            @keydown.native.enter="handleSearch">
          </el-input>
        </div>
        <el-button class="search-btn" type="primary" @click="handleSearch">
          <i class="el-icon-search"></i>
        </el-button>
        <el-button type="primary" @click="handleRefresh">
          <i class="el-icon-refresh"></i>
        </el-button>
      </div>
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        @selection-change="handleSelectionChange"
        row-key="id">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <el-table-column label="材料名称" prop="materialTypeName" align="center"></el-table-column>
        <el-table-column label="规格/型号" prop="model" align="center"></el-table-column>
        <el-table-column label="领用数量" prop="claimNum" align="center">
          <template slot-scope="scope">
            <input-name
              type="number"
              :min="0"
              :controls="false"
              emptyText="--"
              :text="scope.row.claimNum"
              :change="(v) => handleChange(v, scope.row, scope['$index'])">
            </input-name>
          </template>
        </el-table-column>
        <el-table-column label="剩余库存" prop="surplusNum" align="center">
          <template slot-scope="scope">
            <span class="num">{{ scope.row.currentNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存数量" prop="materialNum" align="center"></el-table-column>
        <el-table-column label="单位" prop="unit" align="center"></el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        type="primary"
        @click="hanldeSave">
        提 交
      </el-button>
      <el-button size="medium" @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import InputName from '@/components/public/InputName';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      condition: '',
      hasSearch: false,
      multipleSelection: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.clear();
      this.multipleSelection = [];
      this.condition = '';
      this.hasSearch = false;
    }
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  components: {
    InputName
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId,
      };
      if (this.hasSearch) params.condition = this.condition;
      const { success, data: {
        data
      }} = await this.$Model.materialStockInList(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          return {
            ...item,
            claimNum: null,
            currentNum: item.surplusNum,
          };
        });
        this.total = data.total || 0;
      }
    },
    handleSearch() {
      this.hasSearch = !!this.condition;
      this.clear();
      this.getTableData();
    },
    handleRefresh() {
      this.condition = '';
      this.hasSearch = false;
      this.handleSearch();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleChange(val, row) {
      const { id, surplusNum } = row;
      if (surplusNum < val) {
        this.$message.warning('剩余库存数量不足');
        return;
      }
      const item = this.tableData.find(v => v.id === id);
      if (item) {
        item.claimNum = val ? Number(val) : '';
        item.currentNum = surplusNum - (val || 0);
      }
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
    // 保存
    hanldeSave() {
      if (!this.multipleSelection.length) {
        return this.$message.warning('请勾选选项');
      }
      const hasEmptyNum = this.multipleSelection.some(v => !v.claimNum);
      if (hasEmptyNum) return this.$message.warning('领用数量必须大于0');
      this.$emit('submit', this.multipleSelection);
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";
  @import "../../../assets/styles/table";

  .add-itive-comp {
    .table-container {
      .search-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 15px 0;
        .content {
          width: 340px;
          margin-right: 20px;
        }
      }
      /deep/ .el-table {
        .el-table__body-wrapper {
          min-height: 240px;
          max-height: 500px;
          overflow-y: auto;
          .file-name {
            width: 100%;
            display: inline-block;
            color: $mainColor;
            text-decoration: underline;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .img {
            width: 100px;
            height: 65px;
          }
          .num {
            color: $mainColor;
          }
        }
      }
    }
  }
</style>
